Copper.ToDoList = (function() {
    var data = [{
        id: 1, content: '1Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 2, content: '2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 3, content: '3Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 4, content: '4Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 5, content: '5Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 6, content: '6Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 7, content: '7Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 8, content: '8Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 9, content: '9Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 10, content: '10Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 11, content: '11Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 12, content: '12Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }, {
        id: 13, content: '13Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. '
    }];
    
    var pageCount = 0;
    
    var pageSize = 5;
    
    var itemHeight = 90;
    
    var pageHeight = 450;
    
    var currentPage = 0;
    
    var showed = false;
    
    var el, body, footer;
    
    var isDragging = false;
    
    var lastMousePos = [];
    
    var selectedItem = null;
    
    var idSeed = 100;
    
    var MODE = 'default';
    
    var updateDeleteBtn = function(){
        var last = body.querySelector('.copper-todo-selected');
        if(last){
            deleteBtn.style.left = last.offsetLeft + last.offsetWidth - 28 + 'px';
            deleteBtn.style.top = last.offsetTop + 'px';
            deleteBtn.style.display = 'block';
        }
    };
    
    var dragDummy = document.createElement('DIV');
    dragDummy.className = 'copper-drag-dummy';
    dragDummy.selectable = false;
    document.body.appendChild(dragDummy);
    
    var deleteBtn = document.createElement('DIV');
    deleteBtn.className = 'copper-todo-delete';
    deleteBtn.selectable = false;
    
    var DUMMY_ITEM = document.createElement('LI');
    DUMMY_ITEM.className = 'copper-insert-dummy';
    
    
    return {
        init: function(ct){
            el = ct;
            body = ct.querySelector('.copper-todo-body');
            footer = ct.querySelector('.copper-todo-footer');;
            for(var i = 0; i < data.length; ++i){
                var item = document.createElement('LI');
                item.innerHTML = data[i].content;
                item.setAttribute('data-id', data[i].id);
                item.className = 'copper-todo-item';
                body.querySelector('ul').appendChild(item);
            }
            
            //pageCount = Math.ceil(data.length / pageSize);
            
            //body.querySelector('ul').style.paddingBottom = pageCount * 450 - data.length * itemHeight + 'px';
            
            $(function() {
                var ul = body.querySelector('ul');
            		$(ul).sortable({
                    helper: 'clone',
                    //axis: 'y',
                    appendTo: document.body,
                    opacity: 0.5,
                    zIndex:100000
                });
            		$(ul).disableSelection();
                $(ul).sortable('disable');
          	});
            

            body.appendChild(deleteBtn);

            
            
            //event listener bind
            /*
            footer.querySelector('.copper-todo-previous').addEventListener('click', function(){
                if(currentPage < 1)return;
                currentPage--;
                body.scrollTop = currentPage * body.offsetHeight;
                updateIndicator();
                updateDeleteBtn();
            }, false);            
            footer.querySelector('.copper-todo-next').addEventListener('click', function(){
                if(currentPage > pageCount - 2)return;
                currentPage++;
                body.scrollTop = currentPage * body.offsetHeight;
                updateIndicator();
                updateDeleteBtn();
            }, false);
            */
            
            body.addEventListener('mousedown', Copper.ToDoList.onDragStart, false);           
            ct.querySelector('.copper-todo-header').addEventListener('mousedown', Copper.ToDoList.onHeaderDragStart, false);
            ct.querySelector('.copper-todo-pinch').addEventListener('mousedown', Copper.ToDoList.onFooterDragStart, false);
            deleteBtn.addEventListener('click', Copper.ToDoList.removeItem, false);
            document.getElementById('arrangeBtn').addEventListener('click', function(){
                if(MODE == 'default'){
                    Copper.ToDoList.switchMode('arrange');    
                } else {
                    Copper.ToDoList.switchMode('default'); 
                }
            }, false);
        },
        
        load: function(){
        },
        
        showOrHide: function(){
            showed = !showed;  
            el.style.display = showed? 'block': 'none';  
        },
        
        addItem: function(content){
            var id = idSeed++;
            data.unshift({id: id, content: content});

            var ct = body.querySelector('ul');
            var item = document.createElement('LI');
            item.innerHTML = content;
            item.setAttribute('data-id', id);
            item.className = 'copper-todo-item';
            ct.insertBefore(item, ct.firstChild);
        },
        
        removeItem: function(){
            for(var i = 0; i < data.length; ++i){
                if(data[i].id + '' == selectedItem){
                    break;
                }
            }
            data.splice(i, 1);
            deleteBtn.style.display = 'none';
            
            
            
            var items = body.querySelector('ul').childNodes;
            for(i = 0; i < items.length; ++i){
                if(items[i].getAttribute('data-id') == selectedItem){
                    body.querySelector('ul').removeChild(items[i]);
                }
            }
        },
        
        onHeaderDragStart: function(e){
            isDragging = true;
            lastMousePos = [e.clientX + window.pageXOffset, e.clientY + window.pageYOffset];
            
            document.body.addEventListener('mousemove', Copper.ToDoList.onHeaderDragging, false);
            document.body.addEventListener('mouseup', Copper.ToDoList.onHeaderDragEnd, false);
        },
        
        onHeaderDragging: function(e){
            var x = e.clientX + window.pageXOffset;
            var y = e.clientY + window.pageYOffset;
            
            el.style.left = el.offsetLeft + (x - lastMousePos[0]) + 'px';
            el.style.top = el.offsetTop + (y - lastMousePos[1]) + 'px';
            console.log('x:' + (x - lastMousePos[0])+ ',y:' + el.offsetTop );
            
            lastMousePos = [x, y];
            
            updateDeleteBtn();
        },
        
        onHeaderDragEnd: function(e){
            isDragging = false;
            document.body.removeEventListener('mousemove', Copper.ToDoList.onHeaderDragging);
            document.body.removeEventListener('mouseup', Copper.ToDoList.onHeaderDragEnd);
        },
        
        onFooterDragStart: function(e){
            lastMousePos = [e.clientX + window.pageXOffset, e.clientY + window.pageYOffset];
            
            document.body.addEventListener('mousemove', Copper.ToDoList.onFooterDragging, false);
            document.body.addEventListener('mouseup', Copper.ToDoList.onFooterDragEnd, false);
        },
        
        onFooterDragging: function(e){
            var x = e.clientX + window.pageXOffset;
            var y = e.clientY + window.pageYOffset;
            
            body.style.height = body.offsetHeight + (y - lastMousePos[1]) + 'px';
            console.log('x:' + (x - lastMousePos[0])+ ',y:' + el.offsetTop );
            
            lastMousePos = [x, y];
        },
        
        onFooterDragEnd: function(e){
            document.body.removeEventListener('mousemove', Copper.ToDoList.onFooterDragging);
            document.body.removeEventListener('mouseup', Copper.ToDoList.onFooterDragEnd);
            
        },
        
        onDragStart: function(e){
            var target = e.target;
            if(target.nodeName != 'LI'){
                target = target.parentNode;  
                if(target.nodeName != 'LI'){
                    return;
                }  
            }
        
            var last = body.querySelector('.copper-todo-selected');
            if(last){
                last.className = 'copper-todo-item';
            }
            target.className = 'copper-todo-selected';
            updateDeleteBtn();
        
            //drag process
            selectedItem = target.getAttribute('data-id');
            var x = e.clientX + window.pageXOffset;
            var y = e.clientY + window.pageYOffset;

            
            dragDummy.style.display = 'block';
            dragDummy.style.left = x - 25 + 'px';
            dragDummy.style.top = y - 5 + 'px';
            
            document.addEventListener('mousemove', Copper.ToDoList.onDragging, false);
            document.addEventListener('mouseup', Copper.ToDoList.onDragDrop, false);
        },
        
        onDragging: function(e){
            var x = e.clientX + window.pageXOffset;
            var y = e.clientY + window.pageYOffset;


            dragDummy.style.display = 'block';
            dragDummy.style.left = x + 'px';
            dragDummy.style.top = y + 'px';

            //move on top of self
            var left = el.offsetLeft;
            var right = left + el.offsetWidth;
            var top = el.offsetTop;
            var bottom = top + el.offsetHeight;
            //console.log('x:' + x + ',y:' + y + ',left:' + left + ',top:'+top);
            
            
            if(MODE == 'arrange'){  return
                console.log(e.target.nodeName)
                var target = e.target;
                if(target.nodeName != 'LI'){
                    target = target.parentNode;
                }
                if(target.nodeName != 'LI'){
                    var dataId = target.getAttribute('data-id');
                    console.log(dataId)
                    if(DUMMY_ITEM.attached){
                        if(dataId == DUMMY_ITEM.attached)return;
                        DUMMY_ITEM.parentNode.removeChild(DUMMY_ITEM);
                    }
                    body.querySelector('ul').insertBefore(DUMMY_ITEM, item);
                    DUMMY_ITEM.attached = dataId;
                }
            } else if(Copper.Global.workMode == 'CLOCK'){
                if(x > left && x < right && y > top && y < bottom){
                    Copper.TaskSchedule.reset();
                    return;
                }
                Copper.TaskManager.showDummyTask2(Copper.TaskManager.convertDummyTask(x, 
                        y, Copper.ToDoList.getItemById(selectedItem).content));
            } else {
                
                /*
                var o = Copper.TaskSchedule.getEventTarget(e);
                if(o){
                    Copper.TaskSchedule.createDummyItem(o);
                }
                */
            }
        },
        
        onDragDrop: function(e){
            var x = e.clientX + window.pageXOffset;
            var y = e.clientY + window.pageYOffset;

            //move on top of self
            var left = el.offsetLeft;
            var right = left + el.offsetWidth;
            var top = el.offsetTop;
            var bottom = top + el.offsetHeight;
            console.log('x:' + x + ',y:' + y + ',left:' + left + ',top:'+top);
            if(x > left && x < right && y > top && y < bottom){
                Copper.TaskSchedule.reset();
                
            } else {
            
                if(Copper.Global.workMode == 'CLOCK'){
                    Copper.TaskManager.hideDummyTask();
                    
                    Copper.TaskManager.addTask(Copper.TaskManager.convertDummyTask(x, 
                            y, Copper.ToDoList.getItemById(selectedItem).content));
                } else {
                    //Copper.TaskSchedule.reset();                
                }
            }
            dragDummy.style.display = 'none';
            
            document.removeEventListener('mousemove', Copper.ToDoList.onDragging);
            document.removeEventListener('mouseup', Copper.ToDoList.onDragDrop);
            
            isDragging = false;
        },
        
        createDummyItem: function(pos){
            var page = el.childNodes[pos[0]]; 
            if(currentDummyPos){
                if(currentDummyPos[0] == pos[0] && currentDummyPos[1] == pos[1])return;
                dummy.parentNode.removeChild(dummy);
            }
            console.log(pos)
            var item = page.querySelector('.copper-todo-body').childNodes[pos[1]];  
            
            page.querySelector('.copper-todo-body').insertBefore(dummy, item);
            currentDummyPos = [];
            currentDummyPos.push(pos[0]);
            currentDummyPos.push(pos[1]);
            //page.appendChild(dummy);
        },
        
        switchMode: function(mode){
            var ct = body.querySelector('ul');
            if(mode == 'default'){
                $(ct).sortable('option', 'helper', 'clone');
                $(ct).sortable('option', 'appendTo', document.body);
                $(ct).sortable('option', 'axis', false);
                $(ct).sortable('disable');
            } else {
                $(ct).sortable('option', 'helper', 'original');
                $(ct).sortable('option', 'appendTo', 'parent');
                $(ct).sortable('option', 'axis', 'y');
                $(ct).sortable('enable');
            }
            $(ct).sortable('refresh');
            MODE = mode;
        },
        
        getItemById: function(id){
            for(var i = 0; i < data.length; ++i){
                if(data[i].id + '' == id){
                    return data[i];
                }
            }
        }
    };
})();